<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onmousemove鼠标显示在盒子内部的坐标</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    #box{
        border: 1px solid #000;
        height: 200px;
        width:370px;
        margin: 100px;
        background: chartreuse;
        font: 20px/50px "simsung";
        padding-top: 100px;
        padding-left: 30px;
    }
</style>
<script src="publicfunction.js"></script>
<body>
<div id="box">
    鼠标在盒子内部横坐标X:无<br>
    鼠标在盒子内部横坐标Y:无
</div>
<script>
    var box=document.getElementById('box');
box.onmousemove=function (event) {
        event=event||window.event;
        var pageX=event.pageX||scroll().top+event.clientX;
        var pageY=event.pageY||scroll().top+event.clientY;

        var xx=box.offsetTop;
        var yy=box.offsetLeft;

        var xxx=pageX-xx;
        var yyy=pageY-yy;
     console.log("盒子距离上边高度"+xx);
    console.log("盒子距离左边距离"+yy);
        this.innerHTML=" 鼠标在盒子内部横坐标X:"+xxx+"px;<br>鼠标在盒子内部横坐标Y:"+yyy+"px";
    }
</script>
</body>
</html>